<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :lock-scroll="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @open="openForm"
    width="960px"
    top="40px"
  >
    <div style="margin-bottom: 10px;padding: 5px;">
      <el-table
        ref="table"
        :data="datas"
        border
        tooltip-effect="dark"
      >
        <el-table-column
          label="商品信息" min-width="300">
          <template slot-scope="scope">
            <h-good-info-display v-model="scope.row" :admin="true" :displayInfo="true"></h-good-info-display>
          </template>
        </el-table-column>
        <el-table-column label="商品规格" min-width="120">
          <template slot-scope="scope">
            <h-specs-display v-model="scope.row"/>
          </template>
        </el-table-column>
        <el-table-column
          label="可售数量">
          <template slot-scope="scope">
              <span style="color: red;">
              {{scope.row.stockNum}}
              </span>
          </template>
        </el-table-column>
        <el-table-column
          label="价格信息" min-width="160"
        >
          <template slot-scope="scope">
            <div>采购单价: {{scope.row.currency.symbol}}{{scope.row.purchasePrice.toFixed(2)}}</div>
            <div>国际运费: {{scope.row.currency.symbol}}{{scope.row.globalFreight}}</div>
            <div>国内运费: ￥{{scope.row.freight}}</div>
            <div>结算汇率: {{scope.row.closeExchangeRate}}</div>
            <div class="red">销售单价: ￥{{scope.row.sellPrice.toFixed(2)}}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-form :model="orders" :rules="rules" ref="form" :inline="true" class="order-form" label-width="60px">
      <el-row v-for="(item,index) in orders.bugInfos" :key="item.id+''+index" :gutter="30">
        <el-col :span="15">
          <span style="font-size: 12px;">{{index+1}}:</span>
          <el-form-item label="用户名" required>
            <h-user-choose v-model="item.userId" @handleSelect="handleSelect(index, $event)"/>
          </el-form-item>
          <el-form-item label="数量" required>
            <el-input-number v-model="item.num" :step="1" :min="1" @change="numchange(index,$event)"
                             controls-position="right"/>
          </el-form-item>
          <el-button type="text" @click="addMore(index)"><i class="fa fa-plus"></i></el-button>
          <el-button @click="deleteOrder(index)" v-if="index!=0" type="text"><i class="fa fa-minus"></i></el-button>
        </el-col>
        <el-col :span="9" class="cost-info">
          <div v-if="item.grade!=null">
            <span>等级: {{item.grade.code}} </span><span> 优惠: {{item.grade.discounts}}%</span> <span
            class="red"> 付款额: ￥{{item.cost}}</span>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button type="primary" @click="createOrders" :loading="loading"><i class="fa fa-plus"></i> 确认提交订单</el-button>
    </div>
  </el-dialog>

</template>
<style>
  .cost-info {
    font-size: 12px;
    font-weight: normal;
    line-height: 30px;
  }
</style>
<script>
  import Dialog from 'src/components/common/js/dialog-mix'
  import AdminService from 'src/service/admin'
  import HUserChoose from 'src/components/common/HUserChoose'
  import HGoodInfoDisplay from 'src/components/common/display/HGoodInfoDisplay'
  import HSpecsDisplay from 'src/components/common/display/HSpecsDisplay'

  export default {
    name: 'CreateOrder',
    mixins: [Dialog],
    components: {HUserChoose, HGoodInfoDisplay, HSpecsDisplay},
    data() {
      return {
        loading: false,
        grades: [],
        orders: {
          bugInfos: [{
            userId: null,
            num: 1,
            grade: null,
            cost: 0
          }],
          purchaseDetailId: 0,
          type: 1
        },
        datas: [],
        rules: {
          userName: [
            {required: true, message: '请选择用户', trigger: 'blur'}
          ]
        }
      }
    },
    props: {

      value: {
        type: Object,
        required: true
      }
    },
    watch: {
      value: function (c, o) {
        if (c != null) {
          this.datas = [c]
        } else {
          this.datas = []
        }
      }
    },
    methods: {
      createOrders: function () {
        this.orders.purchaseDetailId = this.value.id
        const me = this
        me.loading = true
        AdminService.orderCreate(this.orders).then(
          data => {
            if (data != null) {
              me.$message.success('添加订单成功!')
              me.$emit('success', data.datas)
            }
            me.loading = false
          }
        )
      },
      handleSelect: function (index, event) {
        const data = this.orders.bugInfos[index]
        if (event == null) {
          data.grade = {}
          data.cost = 0
        } else {
          const vip = event[0].vipId
          const grades = this.grades.filter(d => {
            return d.id = vip
          })
          if (grades != null && grades.length > 0) {
            data.grade = grades[0]
            data.cost = ((100 - data.grade.discounts) * this.value.sellPrice * data.num / 100).toFixed(2)
          }
        }
      },
      numchange: function (index, event) {
        const data = this.orders.bugInfos[index]
        if (data.grade != null) {
          data.cost = ((100 - data.grade.discounts) * this.value.sellPrice * event / 100).toFixed(2)
        }
      },
      addMore: function (index) {
        if (this.orders.bugInfos.length < this.value.stockNum) {
          this.orders.bugInfos.push({
            userId: null,
            num: 1,
            grade: null,
            cost: 0
          })
        } else {
          this.$message.warning('添加的数量不能超过库存的数量!')
        }
      },
      deleteOrder: function (index) {
        this.orders.bugInfos.splice(index, 1)
      },
      openForm: function () {
        this.orders = this.initData()
      },
      initData: function () {
        return {
          bugInfos: [{
            userId: null,
            num: 1,
            grade: null,
            cost: 0
          }],
          purchaseDetailId: 0,
          type: 1
        }
      },
      restForm: function () {
        this.$refs['form'].resetFields()
      }
    },
    mounted: function () {
      const me = this
      AdminService.userGrade().then(ds => {
        if (ds != null) {
          me.grades = ds.datas
        }
      })

      if (this.value != null) {
        this.datas = [this.value]
      } else {
        this.datas = []
      }
    }
  }
</script>
